<template>
    <div class="itemMusicFooter">
        <div class="footerLeft" @click="updateDetailShow">
            <img :src="playList[playListIndex].al.picUrl" alt="">
            <div>
                <p>{{playList[playListIndex].name}}</p>
                <span>横滑可以切换上下首哦</span>
            </div>
        </div>
        <div class="footerRight">
            <svg class="icon shiping" aria-hidden="true" @click="play" v-if="isbtnShow">
            <use xlink:href="#icon-bofanganniu"></use>
            </svg>
            <svg class="icon shiping" aria-hidden="true" @click="play" v-else>
            <use xlink:href="#icon-zanting"></use>
            </svg>
            <svg class="icon libiao" aria-hidden="true">
            <use xlink:href="#icon-24gf-playlistMusic"></use>
            </svg>
        </div>
        <audio ref="audio" :src=" `https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"></audio>
        <van-popup v-model:show="DetailShow" position="right" :style="{ height: '100%', width: '100%' }">
        <MusicDetailVue :play="play" :addDuration="addDuration"/>
        </van-popup>
    </div>
</template>

<script>
import { mapState ,mapMutations} from 'vuex'
import MusicDetailVue from './MusicDetail.vue';
export default {
    data () {       
        return {
            interVal:0
        }
    },
    computed:{ 
         ...mapState(["playList","playListIndex","isbtnShow","playId","DetailShow"])
    },
    mounted() {
      console.log(this.$refs);
      console.log('mounted');
      this.$store.dispatch("getLyric",this.playId);
      this.updateTime()
    },
    // 论是组件本身的数据变更，还是从父组件接收到的 props 或者从vuex里面拿到的数据有变更，都会触发虚拟 DOM 重新渲染和打补丁，并在之后调用 updated。
    updated() {
        console.log('updated');
    this.$store.dispatch("getLyric",this.playId);
  },
    methods:{
        play:function(){
            // 判断音乐是否播放
            if (this.$refs.audio.paused) {
                this.$refs.audio.play();
                this.updateIsbtnShow(false);
                this.updateTime(); //播放时就调用函数进行传值
            } else {
                this.$refs.audio.pause();
                this.updateIsbtnShow(true); 
                clearInterval(this.interVal); //暂停时清除定时器
            }
        },
        updateTime:function(){
            this.interVal=setInterval(()=>{
                this.updateCurrentTime(this.$refs.audio.currentTime);
                console.log("时间变化");
            },1000)
        },
        addDuration:function(){
            this.updateDuration(this.$refs.audio.duration)
        },
        ...mapMutations(['updateIsbtnShow',"updateDetailShow","updateCurrentTime","updateDuration"])
        },
    watch:{
        playId:function(){
            //监听如果歌曲id发生了改变，就自动播放音乐
            //  console.log(this.playListIndex);
            this.$refs.audio.autoplay = true;
            if (this.$refs.audio.paused) {
                //如果是暂停状态，改变图标
                this.updateIsbtnShow(false);
            }
        },
    },
    components:{ MusicDetailVue }
}
</script>

<style lang="less" scoped>
.itemMusicFooter{
    width: 100%;
    height: 60px;
    background-color: #ffffff;
    border-top: 2px solid #ababad;
    //固定定位
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    .footerLeft{
        display: flex;
        flex-direction: row;
        align-items: center;
        img{
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin: 0 5px 0 10px;
        }
        div{
        //     display: flex;
        // flex-direction: column;
        p{
            font-size: 16px;
            font-weight: 600;
            width:200px;
            overflow: hidden; 
            white-space: nowrap; 
            text-overflow: ellipsis;
        }
        span{
            font-size: 12px;
            color: #ababad;  
        }
    }
    }
    .footerRight{
        display: flex;
        flex-direction: row;
        align-items: center;
        .shiping{
            width: 25px;
            height: 25px;
            margin-right: 15px;
        }
        .libiao{
            width: 25px;
            height: 25px;
            margin-right: 10px;
        }
    }
}
</style>